<!--
 * @Author: 王灿
 * @Date: 2019-11-09 00:40:05
 * @LastEditTime : 2019-12-22 10:00:32
 * @Description: 咨讯
 * @FilePath: \scarlet-sparrow-admin\src\configure\configure-inform\index
-->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title"  @addTableRow="onTableRow"/>
    <!-- 咨询列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 标题 -->
        <el-table-column prop="title" label="标题"></el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="createAt" label="创建时间"></el-table-column>
        <!-- 咨询内容 -->
        <el-table-column label="咨询内容">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.content" />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button @click="onEdit(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 新增/编辑 -->
    <el-dialog class="course-dialog" :title="tabTitle" :visible.sync="isShow" :close-on-click-modal="false" width="50%">
      <inform-operate @onCancelBtn="onCancelBtn" :row="tabRow" />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import InformOperate from './inform-operate/index.vue'
import { getInformList } from '@/api/configure.js'
export default {
  name: 'ConfigureInform',
  components: { JqTitle, JqTooltip, JqPage, InformOperate },
  data() {
    return {
      title: { label: '系统咨询', flag: true, searchFlag: false },
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      isShow: false,
      tabTitle: '',
      tabRow: {},
      isRefresh: false
    }
  },
  created() {
    this.onGetInformList()
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetInformList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetInformList()
    },
    // 监听弹窗
    isShow() {
      if (!this.isShow) {
        this.tabTitle = ''
        this.tabRow = {}
      }
    },
    // 页面刷新
    isRefresh() {
      if (this.isRefresh) {
        this.onGetInformList()
      }
    }
  },
  methods: {
     // 父子组件通讯
    onTableRow(data) {
      this.tabTitle = "新增"
      this.isShow = data.isShow
      this.isRefresh = false
    },
    // 咨询列表
    onGetInformList() {
      getInformList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 父子组件传值
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 详情
    onEdit(row) {
      this.tabTitle = "编辑"
      this.isShow = true
      this.isRefresh = false
      this.tabRow = row
    },
    // 弹窗关闭
    onCancelBtn(data) {
       this.isShow = data.isShow
       this.isRefresh = data.isRefresh
    }
  }
}
</script>
